<template>
    <view class="home-page">
        <view class="header">
            <view>杭州市梦想小镇</view>
            <view class="search-bar">
                <input type="text" placeholder="永辉超市优惠商品">
            </view>
            <view class="notification-icon"> </view>
        </view>

        <view style=" border-bottom-style:none;width:100%;height:120px;">
            <img src="../../static/imgs/assets/02.jpg" style="width:100%;height:120px; border-bottom-style:none;">
        </view>

        <view class="item-container">
            <view class="item">
                <image src="../../static/imgs/assets/super.png"/>
                <text>超市便利</text>
            </view>
            <view class="item">
                <image src="../../static/imgs/assets/market.png"/>
                <text>菜市场</text>
            </view>
            <view class="item">
                <image src="../../static/imgs/assets/fruits.png"/>
                <text>水果店</text>
            </view>
            <view class="item">
                <image src="../../static/imgs/assets/flower.png"/>
                <text>鲜花绿植</text>
            </view>
            <view class="item">
                <image src="../../static/imgs/assets/drug.png"/>
                <text>医药健康</text>
            </view>
            <view class="item">
                <image src="../../static/imgs/assets/home.png"/>
                <text>家居时尚</text>
            </view>
            <view class="item">
                <image src="../../static/imgs/assets/cake.png"/>
                <text>烘焙蛋糕</text> 
            </view>
            <view class="item">
                <image src="../../static/imgs/assets/sign.png"/>
                <text>签到</text>
            </view>
            <view class="item">
                <image src="../../static/imgs/assets/prestige.png"/>
                <text>大牌免运</text>
            </view>
            <view class="item">
                <image src="../../static/imgs/assets/red.png"/>
                <text>红包套餐</text>
            </view>
        </view>
        <view class="include">
            <text class="left-text">附近商店</text>
            <text class="right-text" @click="more">查看更多</text>
        </view>
        <!-- 循环渲染店铺列表 -->
   <view v-for="(shop, index) in shopList" :key="index" class="shop-item" @click="goToDetail(shop.id)">
    <img :src="shop.imgUrl" style="width: 50px; height: 50px;">
    <view class="shop-info">
        <view>{{shop.name}}</view>
        <text>月售: {{shop.sales}}</text>
        <text>起送: {{shop.expressLimit}}</text>
        <text>基础运费: {{shop.expressPrice}}</text>
        <view class="a">{{shop.slogan}}</view>
    </view>
</view>
    </view>
</template>

<script>
import config from "../config.js"
export default {
    data() {
        return {
            title: 'Hello',
            shopList: []
        };
    },
    
    onShow() {
        uni.request({
            url: config.api_host+'/data', 
            method: 'GET',
            success: (res) => {
                if (res.statusCode === 200) {
                    this.shopList = res.data;
                }
            },
            fail: (err) => {
                console.log('请求失败', err);
            }
        });
    },
    methods: {
        goToDetail(id) {
            // 这里可以实现跳转到详情页的逻辑，暂时先简单打印id
            console.log('要跳转的店铺id:', id);
            uni.navigateTo({
                url: `/pages/detail/detail?id=${id}` 
            });
        },
        more(id) {
            // 这里可以实现跳转到详情页的逻辑，暂时先简单打印id
            console.log('要跳转的店铺id:', id);
            uni.navigateTo({
                url: `/pages/more/more?id=${id}` 
            });
        },
    }
};
</script>

<style scoped>
.a{
    color: red;
}
.home-page {
    font-family: Arial, sans-serif;
}
.header {
    background-color: #0099ff;
    color: white;
    padding: 10px;
}
.search-bar input {
    height: 15px;
    padding: 8px;
    border-radius:15px;
    background-color: white;
}
.item-container {
    width: 100%;
    height: 170px;
    background-image: linear-gradient(#0099ff,white);
    border-top-style:none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.item {
    width: 20%;
    height: 80px;
    border-radius: 10px; /* 圆角 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-style: none;
}
.item image {
    margin-bottom: 10px; 
    width:30px;
    height: 30px;
}
.item text {
    font-size: 15px; /* 文字大小 */
    color: #333; /* 深灰色文字 */
}
.include {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.199);
}
.left-text {
    text-align: left;
}
.right-text {
    text-align: right;
}
/* 店铺列表项整体样式 */
.shop-item {
    display: flex;
    align-items: center;
    margin: 15px 0;
    padding: 10px;
    border-bottom: 1px solid #e0e0e0;
}
/* 图片样式 */
.shop-item image {
    width: 50px;
    height: 50px;
    margin-right: 10px;
}
/* 店铺信息容器样式 */
.shop-info {
    flex: 1;
}
.shop-item view {
    font-size: 16px;
    color: #333;
    margin-bottom: 5px;
}
.shop-item text {
    font-size: 14px;
    color: #666;
    line-height: 1.4;
}
</style>